<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios案例</title>
	</head>
	<body>
		<h1>Axios远程调用练习</h1>
		<script src="../js/axios.js"></script>
		<script>
			//编辑远程Ajax请求。
			/* 1.promise对象解决传统ajax中的回调地狱问题
			   2.Axios封装了promise对象，异步调用更加简洁
			   3.常见请求类型：1.get(查) 2.post(form表单) 
							  3.put(改) 4.delete(删除)
			   4.分组：用法相同：get/delete   post/put
			   注意事项：默认条件下通过浏览器只能发起get请求
			 */
			/* 1.Axios入门案例-get请求
				原始方式：参数：1.url地址  2.请求参数  3.回调函数
				axios方式：参数：1.url地址  2.请求参数
						关键字：then（回调函数）
				*/
			  //let data = ''
			axios.get("http://localhost:8090/findAll")
				.then(function(result){
					//data = result
					//result返回值是一个promise对象
					console.log(result)
					//动态获取服务器返回值使用result.data的方式
					console.log(result.data)
				})
			//2.箭头函数写法,result参数只有一个可以省略括号	
			axios.get("http://localhost:8090/findAll")
				/* .then((result) => {
					console.log(result.data)
				}) */
				.then(result => {
					console.log(result.data)
				}) 
			
			/* 
			3.1带参数的请求方式1----字符串拼接
			 需求：查询id=100的用户数据
			 url:http://localhost:8090/getUserId?id=100
			 */	
			axios.get("http://localhost:8090/getUserById?id=1")
			.then(result => {
				console.log(result.data)
			})
			/* 
			3.2 对象请求方式（重点）
			需求：
				如果Ajax请求的参数有多个，如果采用字符串拼接的方式
				导致效率太低，结构复杂，所以需要采用对象的方式实现数据的提交
			 */
			/* 
				根据对象查询数据库
				URL:http://localhost:8090/getUserByUS
			 */
			//1.封装对象
			let user = {
				name:'大乔',
				sex:'女',
				
			}
			axios.get("http://localhost:8090/getUserByUS",{
				//关键字：params，只适用于GET请求方式
				params:user
			}).then(result => {
				console.log(result.data)
			})	
			
			  
			/*	要求：利用restFul风格，查询name中包含“君”的用户
				url:http://localhost:8090/user/君  GET
			*/
			axios.get("http://localhost:8090/user/君")
				.then(result => {
					console.log(result.data)
				})
			
			
			
			
			
			
			
			
			
				
				
				
			
		</script>
	</body>
</html>
